<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas width="800" height="600"></canvas>
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');

        let img = document.createElement('img');//new Image()也可以
        img.src = '../00-assets/imgs/s11.jpg';

        /*
            注意，想要在canvas里加载图片，务必要写在img.onload事件里，因为图片不加载，canvas是识别不到这个图片的
        */
        img.onload = function () {
            // 第一种绘制图片的方式，参数1为图像本身、参数2为图片渲染到画布的水平位置、参数3为图片渲染到画布的垂直位置
            // ctx.drawImage(img,0,0);

            // 第二种绘制图片方式，参数1为图像本身、参数2为图片渲染到画布的水平位置、参数3为图片渲染到画布的垂直位置、参数4将图像缩放到对应的宽度，参数5将图像缩放到相应的宽度
            // ctx.drawImage(img,0,0,468,270);

            // 第三种绘制图片方式，参数1为图像本身、后面的四个参数分别为你要对这个图片进行裁切的起点位置和裁切后图片的宽高，再后面四个参数为图片在画布的位置以及要渲染的宽高。
            ctx.drawImage(img,770,0,553,688,0,0,276,344);
        };
    </script>
</body>

</html>